<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2020/5/31
  Time: 12:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>品牌列表</title>
    <%@include file="/common/header.jsp"%>

</head>
<body>
<style>
</style>
<div id="root">
    <Collapse value="1">
        <Panel name="1">
            条件查询
            <p slot="content">
                <i-form :label-width="60" inline>
                    <Form-Item label="品牌名" >
                        <i-input v-model="brandVo.name"></i-input>
                    </Form-Item>
                    <i-button type="primary" @click="pageNo=1;getList(brand);">搜索</i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <Card style="margin: 20px 0" dis-hover>

        <Icon type="ios-film-outline"></Icon>
        数据列表
        <shiro:hasPermission name="brand:add">
        <i-button type="info" @click="add" :style="{float:'right'}">添加</i-button>
        </shiro:hasPermission>
    </Card>
    <Modal v-model="modal1" title="添加品牌" @on-ok="handleSubmit('brand')" @on-cancel="noupdate">
        <i-Form ref="brand" :model="brand" :rules="ruleInline" :label-width="100">
            <Form-Item prop="name" label="品牌名称">
                <i-Input type="text" v-model="brand.name" ></i-Input>
            </Form-Item>
            <Form-Item prop="firstLetter" label="品牌首字母">
                <i-Input type="text" v-model="brand.firstLetter"></i-Input>
            </Form-Item>
            <form-Item label="品牌logo">
                <Upload action="/sys/brand/upload" name="attach" :before-upload="handlerBeforeUpload" :on-success="uploadSuccess" ref="upload">
                    <i-Button icon="ios-cloud-upload-outline">Upload files</i-Button>
                </Upload>
                <div v-if="img!=null">
                    <img :src="img" width="100px">
                </div>
            </form-Item>

            <Form-Item prop="password" label="品牌故事">
                <i-Input type="text" v-model="brand.brandStory"></i-Input>
            </Form-Item>
            <Form-Item prop="password" label="排序">
                <i-Input type="text" v-model="brand.sort" ></i-Input>
            </Form-Item>
            <Form-Item label="是否显示">
                <Radio-Group v-model="brand.showStatus">
                    <Radio :label="1">
                        <span>是</span>
                    </Radio>
                    <Radio :label="0">
                        <span>否</span>
                    </Radio>
                </Radio-Group>
            </Form-Item>
            <Form-Item label="品牌制造商">
                <Radio-Group v-model="brand.factoryStatus">
                    <Radio :label="1">
                        <span>是</span>
                    </Radio>
                    <Radio :label="0">
                        <span>否</span>
                    </Radio>
                </Radio-Group>
            </Form-Item>
        </i-Form>
    </Modal>
    <Modal v-model="modalupdate" title="修改品牌" @on-ok="doupdate" @on-cancel="noupdate">
        <i-Form ref="brand" :model="brand" :rules="ruleInline" :label-width="100">
            <Form-Item prop="name" label="品牌名称">
                <i-Input type="text" v-model="brand.name" ></i-Input>
            </Form-Item>
            <Form-Item prop="firstLetter" label="品牌首字母">
                <i-Input type="text" v-model="brand.firstLetter"></i-Input>
            </Form-Item>
            <%--<Form-Item prop="" label="品牌logo">--%>
                <%--<Upload action="">--%>
                    <%--<i-Button icon="ios-cloud-upload-outline">Upload files</i-Button>--%>
                <%--</Upload>--%>
            <%--</Form-Item>--%>
            <form-Item label="品牌logo">
                <Upload action="/sys/brand/upload" name="attach" :before-upload="handlerBeforeUpload" :on-success="uploadSuccess" ref="upload1">
                    <i-Button icon="ios-cloud-upload-outline" >Upload files</i-Button>
                </Upload>
                <div>
                    <img :src="brand.logo" width="100px">
                </div>
            </form-Item>

            <Form-Item prop="password" label="品牌故事">
                <i-Input type="text" v-model="brand.brandStory"></i-Input>
            </Form-Item>
            <Form-Item prop="password" label="排序">
                <i-Input type="text" v-model="brand.sort" ></i-Input>
            </Form-Item>
            <Form-Item label="是否显示">
                <Radio-Group v-model="brand.showStatus">
                    <Radio :label="1">
                        <span>是</span>
                    </Radio>
                    <Radio :label="0">
                        <span>否</span>
                    </Radio>
                </Radio-Group>
            </Form-Item>
            <Form-Item label="品牌制造商">
                <Radio-Group v-model="brand.factoryStatus">
                    <Radio :label="1">
                        <span>是</span>
                    </Radio>
                    <Radio :label="0">
                        <span>否</span>
                    </Radio>
                </Radio-Group>
            </Form-Item>
        </i-Form>
    </Modal>
    <i-table :columns="columns" :data="data" @on-selection-change="tableSelect=arguments[0]" border stripe height="300">
        <template slot-scope="{row}" slot="factoryStatus">
            <shiro:hasPermission name="brand:update">
                <i-switch :value="row.factoryStatus === 1?true:false" @on-change="change(row)"/>
            </shiro:hasPermission>
            <shiro:lacksPermission name="brand:update">
                <i-switch :value="row.factoryStatus === 1?true:false" @on-change="change(row)" disabled/>
            </shiro:lacksPermission>
            <%--{{row.factoryStatus === 1?'是':'否'}}--%>
        </template>
        <template slot-scope="{row}" slot="showStatus" >
            <shiro:hasPermission name="brand:update">
                <i-switch :value="row.showStatus === 1?true:false" @on-change="change2(row)" />
            </shiro:hasPermission>
            <shiro:lacksPermission name="brand:update">
                <i-switch :value="row.showStatus === 1?true:false" @on-change="change2(row)" disabled/>
            </shiro:lacksPermission>
                <%--{{row.factoryStatus === 1?'是':'否'}}--%>
        </template>
        <template slot-scope="{row,index}" slot="count">
            商品：{{row.productCount}}
        </template>

        <template slot-scope="{row,index}" slot="action">
            <shiro:hasPermission name="brand:update">
            <i-Button type="success" size="large" @click="update(row)">修改</i-Button>
            </shiro:hasPermission>
            <shiro:hasPermission name="brand:del">
            <i-Button type="error" size="large" @click="del(row,index)">删除</i-Button>
            </shiro:hasPermission>
        </template>
    </i-table>
    <i-button type="error" @click="pdel">批量删除</i-button>
    <template>
        <Page :total="total1"
              show-elevator
              :page-size="pageSize"
              :current.sync="pageNo"
              show-total
              show-sizer
              :page-size-opts="[5,10,15,20]"
              style="margin-left: 30%;"
              @on-page-size-change="pageSize=arguments[0];getList();"
              @on-change="getList"/>
    </template>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {title:"品牌名称",key:"name"},
                {title:"品牌首字母",key:"firstLetter"},
                {title:"排序",key:"sort"},
                {title:"品牌制造商",slot:"factoryStatus",width: "120%"},
                {title:"是否显示",slot:"showStatus",width: "120%"},
                {title:"相关",slot:"count"},
                {title:"操作",slot:"action"},
            ],
            data: [],
            total1:{},
            brandVo:{},
            pageSize:5,
            pageNo:1,
            modal1:false,
            modalupdate:false,
            tableSelect:[],
            status:[
                {key:1,value:true},
                {key:0,value:false},
            ],
            brand:{
                sort:'0',
                showStatus:'0',
                factoryStatus:'0'
            },
            ruleInline: {
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                firstLetter: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ]
            },
            img:null,

        },
        mounted(){
            this.getList();
        },
        methods: {
            getList(){
                axios.post(`/sys/brand/brandList/${this.pageSize}/${this.pageNo}`,this.brandVo).then(
                    ({data})=>{
                        this.data=data.result.list;
                        this.total1 = data.result.total;
                    }
                )
            },
            change (row) {
                if(row.factoryStatus==1){
                    row.factoryStatus=0;
                }else if(row.factoryStatus==0){
                    row.factoryStatus=1;
                }
                this.brand = row;
                axios.post(`sys/brand/update`,this.brand).then(
                    ({data})=>{
                        if(data.code){
                            iview.Message.success({content:data.msg});
                            this.getList();
                        }else{
                            iview.Message.error({content:data.msg});
                        }
                    }
                )
            },
            change2 (row) {
                if(row.showStatus==1){
                    row.showStatus=0;
                }else if(row.showStatus==0){
                    row.showStatus=1;
                }
                this.brand = row;

                axios.post(`sys/brand/update`,this.brand).then(
                    ({data})=>{
                        if(data.code){
                            iview.Message.success({content:data.msg});
                            this.getList();
                        }else{
                            iview.Message.error({content:data.msg});
                        }
                    }
                )
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.brand.name.trim().length==0||this.brand.firstLetter.trim().length==0){
                            iview.Message.error("输入错误请重新输入");
                        }else{
                            axios.post(`sys/brand/addBrand`,this.brand).then(
                                ({data})=>{
                                    if(data.code){
                                        iview.Message.success({content:data.msg});
                                        this.getList();
                                    }else{
                                        iview.Message.error({content:data.msg});
                                    }
                                }
                            )
                        }
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            add(){
                this.brand={};
                this.img=null;
                this.clearFiles("upload");
                this.modal1=true;
            },
            update(row){
                this.brand = row;
                this.clearFiles("upload1");
                this.modalupdate = true;
            },
            doupdate(){
                axios.post(`sys/brand/update`,this.brand).then(
                    ({data})=>{
                        if(data.code){
                            iview.Message.success({content:data.msg});
                            this.getList();
                        }else{
                            iview.Message.error({content:data.msg});
                        }

                    }
                )
            },
            del(row,index){
                let _this = this;
                iview.Modal.confirm({
                    title:"您确定要删除吗？",
                    content:"此操作是不可逆的",
                    onOk(){
                        axios.get("/sys/brand/del?id="+row.id).then(
                            ({data})=> {
                                if (data.code == 1000) {
                                    iview.Message.success({content: data.msg});
                                    if (index == 0) {
                                        if (_this.pageNo != 1) {
                                            _this.pageNo = _this.pageNo - 1;
                                        }
                                    }
                                    ;
                                    _this.getList();
                                }else {
                                    iview.Message.error({content:data.msg});
                                }
                            }
                        )
                    },
                    onCancel(){
                        iview.Message.info("您取消了删除！");
                    }
                })
            },
            pdel(){
                let a = this.tableSelect.map(node=>"id="+node.id).join("&");
                axios.get(`sys/brand/del?${a}`).then(
                    ({data})=>{
                        if(data.code==1000){
                            iview.Message.success({content:data.msg});
                            this.pageNo=1;
                            this.getList();
                        }else {
                            iview.Message.error({content:data.msg});
                        }
                    }
                )

            },
            uploadSuccess(response){
                console.log(response);
                iview.Message.success("上传yes");
                this.brand.logo=response.result.attachPath;
            },
            noupdate(){
                iview.Message.info("已取消");
                this.getList();
            },
            handlerBeforeUpload(file){
                console.log(file);
                const ct = new FileReader();
                ct.readAsDataURL(file);//读取本地文件
                ct.onloadend=()=>{
                    this.img = ct.result;
                };
                this.clearFiles("upload");
                this.clearFiles("upload1");
            },
            clearFiles (name) {
                this.$refs[name].clearFiles();
            }
        }
    })
</script>
</html>
